<template>
  <div class="home">
    <home-header></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icons :iconList="iconList"></home-icons>
    <home-recommend :recommendList="recommendList"></home-recommend>
    <home-weekend :weekendList="weekendList"></home-weekend>
  </div>
</template>

<script>
// @ is an alias to /src
import HomeHeader from '@/components/home/Header'
import HomeSwiper from '@/components/home/Swiper'
import HomeIcons from '@/components/home/Icons'
import HomeRecommend from '@/components/home/Recommend'
import HomeWeekend from '@/components/home/Weekend'
import {mapState} from 'vuex'
export default {
  name: 'Home',
  data(){
    return {
      iconList:[],
      recommendList:[],
      swiperList:[],
      weekendList:[],
      lastCity:''
    }
  },
  computed:{
    ...mapState(['city'])
  },
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
  },
  mounted(){
    this.lastCity=this.city
    this.getHomeInfo()
  },
  methods:{
    getHomeInfo(){
      this.$http.get('/api/index.json?city='+this.city)
      .then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc(res){
      console.log(res);
      if(res.data.ret==true)
      {
        this.iconList=res.data.data.iconList
        this.recommendList=res.data.data.recommendList
        this.swiperList=res.data.data.swiperList
        this.weekendList=res.data.data.weekendList
      }
      
    }
  },
  activated(){
    if(this.lastCity!==this.city){
      this.lastCity=this.city
      this.getHomeInfo()
    }
  }
}
</script>
<style lang="stylus" scoped>

</style>